<template>
  <div>
    <div class="box">
      <div v-for="x in data" :key="x.xid" class="linkBox">
        <router-link to="/"
          ><img class="imgBox" src="../../src/assets/avatar/1.jpg" alt=""
        /></router-link>
        <span>{{ x.jieshao }}</span>
        <van-button class="vanButton" type="default" @click="onMap">地图</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["onchange"],
  data() {
    return {
      id: this.$route.query.id,
      data: null,
    };
  },
  methods: {
    get() {
      let id = this.$route.query.id;
      console.log("jjj", id);
      console.log(this);
      console.log("哈哈", id);
      this.axios.get(`http://localhost:3000/dis?id=${id}`).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
    onMap(){
      this.$router.push('/map')
    }
  },
  mounted() {
    this.get();
  },
  watch: {
    $route(to, form) {
      console.log("haha", to);
      this.get();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 350px;
  height: 500px;
  display: flex;
  margin-left: 15px;
}
.box[data-v-89bbe938] {
  display: flex;
  flex-wrap: wrap;
}
.linkBox {
  width: 350px;
  height: 105px;
  border: 1px solid #eee;
  margin-top: 5px;
  display: flex;
  justify-content: space-evenly;
  line-height: 105px;
  overflow: hidden;
  background-color: #fff;
  user-select: none;
  > a {
    margin: 10px;
  }
}
.linkBox:hover {
  background-color: #eee;
}
.vanButton{
  margin-top: 60px;
  width: 70px;
  height: 40px;
  background: #eee;
}
</style>